require('../../less/views/main.less');
var React = require('react');
var MainTop = require('./main/MainTop');
var MainLeft = require('./main/MainLeft');
var STATIC = require('../configs/STATIC');
module.exports = React.createClass({
	getInitialState:function(){
		return {
			leftWidth: 256,
			centerViewArgs: this.props.centerViewArgs || {},
			centerView: this.props.centerView
		};
	},
	componentDidMount: function (){
		var _index = STATIC.DATA_NAVIGATION_MENU[0].items[0];
		this.forward(_index.url, _index);
	},
	getView: function (){

	},
	forward: function (url, args){
		this.setState({
			centerView: require(url),
			centerViewArgs: args || {}
		});
	},
	__onMenuItemClick: function (data, index){
		data.url && this.forward(data.url, data);
	},
	render:function(){
		var CenterView = this.state.centerView;
		return (
			<div className="v-main">
				<div className="v-main-head">
					<MainTop onLogout={this.props.onLogout} onClickNavIcon={(showNav)=>this.setState({ leftWidth: (showNav?256:0) })}/>
				</div>
				<div className="v-main-body">
					<div className="v-main-body-left" style={{ width: this.state.leftWidth }}>
						<MainLeft menuItems={STATIC.DATA_NAVIGATION_MENU} onMenuItemClick={this.__onMenuItemClick} />
					</div>
					<div className="v-main-body-center" style={{ left: this.state.leftWidth + 8 }}>
						{
							CenterView && <CenterView {...this.state.centerViewArgs}/>
						}
					</div>
					<div className="v-main-body-right"></div>
				</div>
				<div className="v-main-foot"></div>
			</div>
		);
	}
});
